<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <form lay-filter="customersInfoForm" class="layui-form model-form" id="customersInfoForm">
                <input id="id" name="id" type="hidden"/>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: red">*</span>公司名称</label>
                    <div class="layui-input-inline textInputBox">
                        <input name="customerName" placeholder="请输入系统名称" type="text" class="layui-input" lay-verify="required"
                        />
                    </div>
<!--                    <div class="layui-form-mid layui-word-aux">名称支持汉字、英文、字母，举例：智慧云端</div>-->
                </div>
                <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color: red">*</span>营业执照号</label>
                    <div class="layui-input-inline textInputBox">
                        <input name="licenseNo" placeholder="请输入营业执照" type="text" class="layui-input" lay-verify="required"
                        />
                    </div>
<!--                    <div class="layui-form-mid layui-word-aux">不用输入http://或者https://,直接输入www.xxx.com</div>-->
                </div>
                <!--<div class="layui-form-item">
                    <label class="layui-form-label">CNAME地址</label>
                    <div class="layui-input-inline textInputBox">
                        <input name="canme" placeholder="请输入CNAME地址" type="text" class="layui-input"
                        />
                    </div>
                    <div class="layui-form-mid layui-word-aux"></div>
                </div>-->
                <div class="layui-form-item">
                    <label class="layui-form-label">客户所在地址</label>
                        <div class="layui-input-inline mr0" style="display: flex;">
                            <select name="province" id="province" lay-filter="province"></select>
                        </div>
                        <div class="layui-input-inline mr0" style="display: flex;">
                            <select name="city" id="city" lay-filter="city"></select>
                        </div>
                         <div class="layui-input-inline mr0" style="display: flex;">
                             <select name="area" id="area" lay-filter="area"></select>
                        </div>
                </div>



                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-inline textInputBox">
                        <input name="address" placeholder="请输入详细地址" type="text" class="layui-input"
                        />
                    </div>
                    <div class="layui-form-mid layui-word-aux">请输入详细地址</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: red">*</span>联系人姓名</label>
                    <div class="layui-input-inline textInputBox">
                        <input name="contactName" placeholder="联系人姓名" type="text" class="layui-input" lay-verify="required"
                        />
                    </div>
<!--                    <div class="layui-form-mid layui-word-aux">例如：中国三大运营商之一</div>-->
                </div>
<!--                <div class="layui-form-item">-->
<!--                    <label class="layui-form-label"><span style="color: red">*</span>职务</label>-->
<!--                    <div class="layui-input-inline textInputBox">-->
<!--                        <select name="postId" id="postId" lay-filter="postId" lay-verify="required" lay-search></select>-->
<!--                    </div>-->
<!--&lt;!&ndash;                    <div class="layui-form-mid layui-word-aux">例如：5G，运营商</div>&ndash;&gt;-->
<!--                </div>-->
                <div class="layui-form-item">
                    <label class="layui-form-label">所属部门</label>
                    <div class="layui-input-block">
                        <input name="department" placeholder="请输入所属部门" type="text" class="layui-input"/>
                    </div>
                    <!--                    <div class="layui-form-mid layui-word-aux">例如：5G，运营商</div>-->
                </div>

                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">名片</label>
                        <div class="layui-input-block">
                            <div id="btnUpload15" class="layui-btn" style="float: left;"><i class="layui-icon">&#xe681;</i>上传文件
                            </div>
                            <div id="btnUpload15_path" style="margin-left: 150px;line-height: 40px;"></div>
                            <input id="btnUpload15_file" name="visitingCard" type="hidden"/>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: red">*</span>电话</label>
                    <div class="layui-input-block">
                        <input name="telephone" placeholder="请输入电话" type="text" class="layui-input" lay-verify="required"/>
                    </div>
<!--                    <div class="layui-form-mid layui-word-aux">用于前台、总后台、APP端、供应商端、化验端页面底部显示版权信息</div>-->
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">微信号</label>
                    <div class="layui-input-block">
                        <input name="wechatNumber" placeholder="请输入微信号" type="text" class="layui-input"/>
                    </div>
<!--                    <div class="layui-form-mid layui-word-aux">用于前台、总后台、APP端、供应商端、化验端页面底部显示版权信息</div>-->
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-block">
                        <input name="email" placeholder="请输入邮箱" type="text" class="layui-input"/>
                    </div>
<!--                    <div class="layui-form-mid layui-word-aux">用于前台、总后台、APP端、供应商端、化验端页面底部显示版权信息</div>-->
                </div>

<!--                <div class="layui-form-item">-->
<!--                    <label class="layui-form-label">线索来源</label>-->
<!--                    <div class="layui-input-inline mr0">-->
<!--                        <select id="dictType5" name="dictType" lay-filter="dictType">-->
<!--                            <option value="">选择</option>-->
<!--                        </select>-->
<!--                    </div>-->
<!--                   <div class="layui-form-mid layui-word-aux">如果需要完善，请刀【系统设置】-【客户设置】-【线索来源管理】添加。</div>-->
<!--                </div>-->
                <input name="customerType" id="customerType" value="formal" type="hidden"/>
                <input name="companyInfoId" id="companyInfoId" value="888888" type="hidden"/>
<!--                <div class="layui-col-xs6">-->
<!--                    <div class="layui-form-item">-->
<!--                        <label class="layui-form-label"><span style="color: red">*</span>线索来源</label>-->
<!--                        <div class="layui-input-block">-->
<!--                            <select name="clueSourceId" id="clueSourceId" lay-verify="required" lay-filter="clueSourceId" lay-search></select>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="layui-form-mid layui-word-aux">如果需要完善，请刀【系统设置】-【客户设置】-【线索来源管理】添加。</div>-->
<!--                </div>-->

<!--                <div class="layui-form-item">-->
<!--                    <label class="layui-form-label">推荐人</label>-->
<!--                    <div class="layui-input-block">-->
<!--                        <input name="referees" placeholder="请输入推荐人" type="text" class="layui-input"/>-->
<!--                    </div>-->
<!--                    <div class="layui-form-mid layui-word-aux">如果有推荐人请填写推荐人信息</div>-->
<!--                </div>-->
                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-inline textInputBox">
                        <input name="remark" placeholder="备注" type="text" class="layui-input"
                        />
                    </div>
<!--                    <div class="layui-form-mid layui-word-aux">用于前台、总后台、APP端、供应商端、化验端页面底部显示版权信息</div>-->
                </div>
<!--                <div class="layui-form-item">-->
<!--                    <label class="layui-form-label">审批人</label>-->
<!--                    <div class="layui-input-inline mr0">-->
<!--                        <div class="layui-input-block">-->
<!--                            <select name="approver" lay-filter="approver" lay-search></select>-->
<!--                        </div>-->
<!--                    </div>-->
<!--&lt;!&ndash;                    <div class="layui-form-mid layui-word-aux">如果需要完善，请刀【系统设置】-【客户设置】-【线索来源管理】添加。</div>&ndash;&gt;-->
<!--                </div>-->
                <div class="layui-form-item text-right">
<!--                    <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>-->
                    <button class="layui-btn" lay-filter="customersInfoFormSubmit" lay-submit>提交</button>

                </div>
            </form>
        </div>
    </div>
</div>
<style>
    #systemOfficialInfoForm .layui-form-label {
        width: 100px;
        padding-left: 0;
    }

    #systemOfficialInfoForm .layui-input-block {
        margin-left: 120px;
    }

    .imgBox {
        margin-left: 30px;
        float: left;
        width: 300px;
        height: 40px;
        overflow: hidden;
    }

    .imgBox > img {
        max-width: 300px;
        max-height: 40px;
    }
    .textInputBox{
        width: 500px !important;
    }
    .delBtn{
        margin: 9px;
        float: left;
    }
</style>
<!-- js部分-->
<script>
    layui.use(['layer', 'form', 'table', 'admin', 'upload'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var config = layui.config;
        var admin = layui.admin;
        var upload = layui.upload;
        $("body").delegate(".checkImg", "click", function () {
            admin.previewImg(this)
        })
        list();

        //初始化表单
        function list() {
            admin.req('enterprise/sell/admin/customersInfo/list', {}, function (res) {
                form.val("customersInfoForm", res.data[0]);

                if (res.data[0] && res.data[0].visitingCard) {
                    $('#btnUpload15_path').html('<img src="' + res.data[0].visitingCard + '" style="height: 35px;" />');
                }
                var nowdata=res.data[0];
                //
                var selectArea = function (city) {
                    admin.req('enterprisecab/area/admin/area/getArea?parentId=' + city, {}, function (res) {
                        layer.closeAll('loading');
                        if (200 == res.code) {
                            $('#area').append(new Option("请选择区", ""));//往下拉菜单里添加元素
                            $.each(res.data, function (index, item) {
                                $('#area').append(new Option(item.name, item.id));//往下拉菜单里添加元素
                            })
                            form.val('customersInfoForm', nowdata);
                            form.render(); //菜单渲染 把内容加载进去
                        } else {
                            layer.msg('获取(区县)区域信息失败!', {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }, 'GET');
                }

                var selectCity = function (province) {
                    admin.req('enterprisecab/area/admin/area/getCity?parentId=' + province, {}, function (res) {
                        layer.closeAll('loading');
                        if (200 == res.code) {
                            $('#city').append(new Option("请选择市", ""));//往下拉菜单里添加元素
                            $.each(res.data, function (index, item) {
                                $('#city').append(new Option(item.name, item.id));//往下拉菜单里添加元素
                            })
                            form.val('customersInfoForm', nowdata);
                            form.render(); //菜单渲染 把内容加载进去
                            if (nowdata) {
                                selectArea(nowdata.city);
                            }
                        } else {
                            layer.msg('获取(市)区域信息失败!', {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }, 'GET');
                }
                // 获取省区域信息
                admin.req('enterprisecab/area/admin/area/getProvince', {}, function (res) {
                    layer.closeAll('loading');
                    //
                    if (200 == res.code) {
                        $('#province').append(new Option("请选择省", ""));//往下拉菜单里添加元素
                        $.each(res.data, function (index, item) {
                            $('#province').append(new Option(item.name, item.id));//往下拉菜单里添加元素
                        })

                        form.val('customersInfoForm', nowdata);
                        form.render(); //菜单渲染 把内容加载进去
                        if (nowdata) {
                            selectCity(nowdata.province);
                        }
                    } else {
                        layer.msg('获取(省)区域信息失败!', {
                            icon: 2,
                            time: 1000
                        });
                    }
                }, 'GET', true);

                form.on('select(provinceId)', function (data) {
                    $("#city").empty();
                    $('#area').empty();

                    // 获取市区域信息
                    if (data.value != '') {
                        selectCity(data.value);
                    }
                });

                form.on('select(cityId)', function (data) {
                    $('#area').empty();

                    // 获取区县区域信息
                    if (data.value != '') {
                        selectArea(data.value);
                    }
                });


                form.render();
            }, 'GET');
        }
        // 表单提交事件
        form.on('submit(customersInfoFormSubmit)', function (d) {
            layer.load(2);
            admin.req('enterprise/sell/admin/customersInfo/update', d.field, function (res) {
                layer.closeAll('loading');
                if (res.code == 200) {
                    layer.msg(res.msg, {icon: 1});
                    table.reload('customersInfoTable');
                    layer.closeAll('page');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'PUT' );
            return false;
        });

        // form.on('submit(customersInfoFormSubmit)', function (d) {
        //     //
        //     layer.load(2);
        //     admin.req('enterprise/sell/admin/customersInfo/add', d.field, function (res) {
        //         layer.closeAll('loading');
        //         if (res.code == 200) {
        //             layer.msg(res.msg, {icon: 1});
        //             // table.reload('customersInfoTable');
        //             layer.closeAll('page');
        //         } else {
        //             layer.msg(res.msg, {icon: 2});
        //         }
        //     },  'POST');
        //     return false;
        // });



        //查询企业信息
        var enterpriseInfo;
        admin.req('enterprise/system/admin/enterpricceId/getEnterpricceIdVO', {}, function (res) {
            enterpriseInfo = res.data;
        }, 'get', false);
        if ("" == enterpriseInfo || null == enterpriseInfo) {
            layer.msg("企业信息获取异常", {icon: 1});
            return;
        }
        //var productCode = $("input[name='productCode']").val();

        // function list() {
            admin.req('enterprise/area/getProvinceList', {}, function (res) {

                if (200 == res.code) {
                    loadSelectHtml(res.data, "请选择省份", "province", "name");
                }
            }, 'POST', true);

            var selectArea = function (city) {
                admin.req('enterprise/area/getAreaList?parentId=' + city, {}, function (res) {
                    layer.closeAll('loading');
                    if (200 == res.code) {
                        loadSelectHtml(res.data, "请选择区/县", "area", "name");
                    }
                }, 'POST');
            }
            var selectCity = function (province) {
                admin.req('enterprise/area/getCityList?parentId=' + province, {}, function (res) {
                    layer.closeAll('loading');
                    if (200 == res.code) {
                        loadSelectHtml(res.data, "请选择市", "city", "name");
                    }
                }, 'POST');
            }

            form.on('select(province)', function (data) {
                $("#city").empty();
                $('#area').empty();
                // 获取市区域信息
                if (data.value != '') {
                    selectCity(data.value);
                }
            });
            form.on('select(city)', function (data) {
                $('#area').empty();
                // 获取区县区域信息
                if (data.value != '') {
                    selectArea(data.value);
                }
            });

            //获取职务
            admin.req('enterprise/sell/admin/customerContactPost/list', {limit: 999}, (res) => {
                if (res.code == 200) {
                    loadSelectHtml(res.data, "请选择职务", 'postId', 'name')
                    if (res.ata) {
                        $("#postId").val(res.data.postId);
                        form.render('select');
                    }
                }
            }, 'get');

            //获取线索来源
            admin.req('enterprise/sell/admin/customerClueSource/list', {limit: 999}, (res) => {
                if (res.code == 200) {
                    loadSelectHtml(res.data, "请选择线索来源", 'clueSourceId', 'name')
                    if (res.data) {
                        $("#clueSourceId").val(res.data.clueSourceId);
                        form.render('select');
                    }
                }
            }, 'get');
            getUsers();//获取审批人/业务员
            //获取审批人/业务员
            function getUsers() {
                admin.req('user/admin/user/list', {limit: 9999}, function (res) {
                    if (res.code == 200) {
                        var html = '<option value="">请选择审批人/业务员</option>';
                        for (var k = 0; k < res.data.length; k++) {
                            html += '<option value="' + res.data[k].id + '">' + res.data[k].nickname+'/'+ res.data[k].username+ '</option>';
                        }
                        console.log('res.data',res.data)
                        $("form select[name='approver']").html(html);
                        $("form select[name='salesmanId']").html(html);
                        form.render('select');
                        if (res.data) {
                            $("#salesmanId").val(res.data.salesmanId);
                            form.render('select');
                            form.val('customerFollowRecordForm', res.data);
                            form.val('customerFollowRecordDetailForm', res.data);
                        }

                    } else {
                        layer.msg('获取审批人失败', {icon: 2, time: 1000});
                    }
                }, 'GET');
            }


            //上传名片
            uploadImg("btnUpload15", "btnUpload15_path", "btnUpload15_file");



            // 表单提交事件
            // form.on('submit(customersInfoFormSubmit)', function (d) {
            //     //
            //     layer.load(2);
            //     admin.req('enterprise/sell/admin/customersInfo/add', d.field, function (res) {
            //         layer.closeAll('loading');
            //         if (res.code == 200) {
            //             layer.msg(res.msg, {icon: 1});
            //             // table.reload('customersInfoTable');
            //             layer.closeAll('page');
            //         } else {
            //             layer.msg(res.msg, {icon: 2});
            //         }
            //     },  'POST');
            //     return false;
            // });
            // admin.req('enterprise/area/getProvinceList', {}, function (res) {
            //     layer.closeAll('loading');
            //     if (200 == res.code) {
            //         $('#province').append(new Option("", ""));//往下拉菜单里添加元素
            //         $.each(res.data, function (index, item) {
            //             $('#province').append(new Option(item.name, item.id));//往下拉菜单里添加元素
            //         })
            //         if (data != undefined && data.province != undefined) {
            //             // 获取市区域信息
            //             var province = data.province;
            //             admin.req('enterprise/area/getCityList?parentId=' + province, {}, function (res) {
            //                 layer.closeAll('loading');
            //                 if (200 == res.code) {
            //                     $('#city').append(new Option("请选择市", ""));//往下拉菜单里添加元素
            //                     $.each(res.data, function (index, item) {
            //                         $('#city').append(new Option(item.name, item.id));//往下拉菜单里添加元素
            //                     })
            //                     form.val('warehouseCustomerForm', data);
            //                     form.render(); //菜单渲染 把内容加载进去
            //                 } else {
            //                     layer.msg('获取(市)区域信息失败!', {
            //                         icon: 2,
            //                         time: 1000
            //                     });
            //                 }
            //             }, 'POST');
            //         }
            //         if (data != undefined && data.city != undefined) {
            //             // 获取区县区域信息
            //             var city = data.city;
            //             admin.req('enterprise/area/getAreaList?parentId=' + city, {}, function (res) {
            //                 layer.closeAll('loading');
            //                 if (200 == res.code) {
            //                     $('#area').append(new Option("请选择区", ""));//往下拉菜单里添加元素
            //                     $.each(res.data, function (index, item) {
            //                         $('#area').append(new Option(item.name, item.id));//往下拉菜单里添加元素
            //                     })
            //                     form.val('warehouseCustomerForm', data);
            //                     form.render(); //菜单渲染 把内容加载进去
            //                 } else {
            //                     layer.msg('获取(区县)区域信息失败!', {
            //                         icon: 2,
            //                         time: 1000
            //                     });
            //                 }
            //             }, 'POST');
            //         }
            //         form.val('warehouseCustomerForm', data);
            //         form.render(); //菜单渲染 把内容加载进去
            //     } else {
            //         layer.msg('获取(省)区域信息失败!', {
            //             icon: 2,
            //             time: 1000
            //         });
            //     }
            // }, 'POST', true)
        // }

        $('.delBtn').click(function () {
            $('#'+$(this).attr('bandname')).val('');
            $('#'+$(this).attr('bandname')).prev().html('')
        })

        /**
         * 加载地址HTML
         * @param data 下拉菜单数据
         * @param tips select 默认提示
         * @param htmltarget html要插入的位置
         * @param name  下拉框需要显示值的属性
         */
        function loadSelectHtml(data, tips, htmltarget, name) {
            let html = ' <option value>' + tips + '</option>';
            if (!data || data == null) {
                return;
            }
            for (let i = 0; i < data.length; i++) {
                html += `<option value='${data[i].id}'>${data[i][name]}</option>`;
            }
            $("[name='" + htmltarget + "']").html(html);
            form.render('select');
        }

        // 上传图片
        function uploadImg(_elem, pathId, inputId) {
            upload.render({
                elem: '#' + _elem
                , url: config.upload_url + 'uploadFile'
                , data: {}
                , accept: 'file'
                , exts: 'jpg|png|RAR|zip|pdf|txt|doc|docx|xls|xlsx|ppt|pptx'
                , headers: {Authorization: 'Bearer ' + config.getToken()}
                , done: function (res) {
                    if (res.code == 200) {
                        layer.msg(res.msg || "上传成功", {icon: 1});
                        let imagUrl = res.data.url;
                        $('#' + pathId).html('<img src="' + imagUrl + '" style="height: 35px;"/>');
                        $('#' + inputId).val(imagUrl);
                    } else if (res.code == 502) {
                        return location.replace('admin/login.html');
                    } else {
                        layer.msg(res.msg || "上传失败", {icon: 2});
                    }
                }
            });
        }
    });
</script>